<template>
  <div class="listsssa"
       @click="goAssmble">
    <div class="list-container">
      <!-- :style="`background-image:url(${item.cover})`" -->
      <div class="list-imgsa">
        <img :src="item.cover"
             style="width:100%;height:100%">
      </div>
      <div class="list-textss">
        <p class="list-titless">
          {{item.title}}
        </p>
        <div class="list-bottomss">
          <p class="list-sumss">
            <!-- 已开课{{item.chapter ? item.chapter: item.chapter_count}}节&nbsp;|&nbsp;共{{item.chapter ? item.chapter: item.chapter_count}}课&nbsp;&nbsp; -->
            <span class="person"
                  v-if="item.number">{{item.number}}人成团</span>
            <span class="person"
                  v-else>限时秒杀</span>
          </p>
          <p class="list-details">
            <span>{{item.chapter ? item.chapter: item.chapter_count}}课  |  </span>
            <!-- <span>{{item.assemble_money ? '拼课价': "特惠价"}}:</span> -->
            <span>￥{{item.assemble_money ? item.assemble_money : item.money}}</span>
            <span>￥{{item.scribing_money ? item.scribing_money : item.y_money}}</span>
            <!-- <span v-if="item.save_money">省¥&nbsp;{{item.save_money}}</span> -->
            <!-- <span v-else>省¥&nbsp;{{item.y_money - item.money}}</span> -->
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['item'],
  methods: {
    goAssmble () {
      this.$emit('goAssmble')
    }
  }
}
</script>

<style lang="less" scoped>
.listsssa {
  width: 100%;
  height: 248/2px;
  border-top: 10px #FFF solid;
  padding: 0 20px;
  background-color: #ffffff;
  box-sizing: border-box;
  display: flex;
  font-family: PingFangSC-Regular;
  align-items: center;
  .list-container {
    width: 100%;
    display: flex;
    height: calc(100% - 20px);
    background-color: #fff;
    .list-imgsa{
      // width: 30%;
      width: calc(100vw * 0.36);
      height: calc(100vw * 0.36 * 0.63);
      object-fit: cover;
      border-radius: 5px;
      overflow: hidden;
      flex: 0 0 calc(100vw * 0.36);
      margin-right: 11px;
      height: 100%;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
    }
    .list-textss {
      flex: 1;
      height: 100%;
      font-size: 0px;
      position: relative;
      .list-titless {
        font-size: 15px;
        color: #333333;
        width: 100%;
        height: 36px;
        line-height: 19px;
        font-weight: 900;
        //         overflow: hidden;
        //         text-overflow: -o-ellipsis-lastline;
        //         text-overflow: ellipsis;
        //         display: -webkit-box;
        //         -webkit-line-clamp: 2;
        //         line-clamp: 2;
        //         -webkit-box-orient: vertical;
        // 				text-overflow: ellipsis;

        text-overflow: ellipsis;
        display: -webkit-box;
        /* -webkit-box-orient: vertical; */
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .list-bottomss {
        position: absolute;
        bottom: 0;
        width: 100%;
        .list-sumss {
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #999999;
          position: absolute;
          right: 0;
          bottom: 0;
          .person {
            display: inline-block;
            padding: 1px 6px;
            border-radius: 12px;
            border: solid 1px #DA4131;
            color: #DA4131;
            transform: scale(0.9);
          }
        }
        .list-details {
          font-family: PingFangSC-Regular;
          width: 100%;
          position: relative;
          font-size: 0px;
          span:first-of-type {
            font-size: 12px;
            color: #999999;
          }
          span:nth-of-type(3) {
            font-size: 12px;
            color: #ff3e3e;
          }
          span:nth-of-type(2) {
            font-size: 12px;
            color: #999999;
            text-decoration: line-through;
          }
          span:nth-of-type(4) {
            font-size: 11px;
            color: #ff3e3e;
            position: absolute;
            right: 0;
            bottom: 0;
          }
        }
      }
    }
  }
}
</style>
